<template>
  <div>
    <div class="terface-top">
      <span class="iconfont icon-fanhui1"></span>
      <span @click="$router.push('/recommend')">返回</span>
    </div>
    <div class="userinterface">
      <div class="top_interface">
        <div class="top_box" v-if="userinfolist">
          <div class="user_img">
            <img :src="userinfolist.avatarUrl" alt="" />
          </div>
          <p class="name">{{ userinfolist.nickname }}</p>
          <div class="message">
            <span v-if="userfollow">{{ userfollow.length }}关注</span>
            <span v-if="followeds" class="on">{{ followeds.length }}粉丝</span>
            <span v-if="lv">Lv.{{ lv.level }}</span>
          </div>
          <div class="region">
            <div class="item">
              <span>广东</span>
              <span>湛江</span>
            </div>
            <div class="item">
              <span>村龄4年</span>
            </div>
          </div>
          <!-- 编辑资料 -->
          <div class="edit_data">
            <div class="item">
              <span>编辑资料</span>
              <span class="icon iconfont icon-icon-test"></span>
            </div>
          </div>
        </div>
      </div>

      <div class="nav">
        <van-tabs v-model="active">
          <van-tab title="主页">
            <div class="homepage">
              <div class="item">
                <p>唱片收藏架</p>
                <div class="content"></div>
                <p class="red">
                  唱片收藏架<span class="iconfont icon-icon-test"></span>
                </p>
              </div>
              <div class="item">
                <p>上传图片让别人了解你</p>
                <div class="content"></div>
                <p class="red">
                  使用相册<span class="iconfont icon-icon-test"></span>
                </p>
              </div>
              <div class="item">
                <p>大声说出愿望</p>
                <div class="content"></div>
                <p class="red">
                  愿望清单<span class="iconfont icon-icon-test"></span>
                </p>
              </div>
            </div>

            <div class="songlist" v-if="collect">
              <div class="title">
                <h4>
                  我喜欢的音乐
                </h4>
                <!-- <div class="iconfont icon-tianjia" ></div> -->
              </div>
              <router-link
                tag="div"
                class="song_item"
                v-for="item in userlikeL"
                :key="item.id"
                :to="'/rank/songlistdetails?id=' + item.id"
              >
                <van-swipe-cell>
                  <van-cell :border="false">
                    <div class="img">
                      <img :src="item.coverImgUrl" alt="" />
                    </div>
                    <div class="item_name">
                      <p>{{ item.name }}</p>
                      <p>
                        <span>{{ item.trackCount }}首，</span
                        ><span>播放{{ item.playCount | playCount }}次</span>
                      </p>
                    </div>
                  </van-cell>
                </van-swipe-cell>
              </router-link>
            </div>


            <div class="songlist" v-if="setup">
              <div class="title">
                <h4>
                  创建歌单<span>({{ setup.length }}个)</span>
                </h4>
                <div class="iconfont icon-tianjia">
                  <van-cell is-link @click="showPopup"></van-cell>
                  <van-popup
                    v-model="show"
                    round
                    position="bottom"
                    :style="{ height: '30%' }"
                  >
                    <div class="song_content">
                      <h4>新建音乐歌单</h4>
                      <input
                        type="text"
                        v-model="newName"
                        placeholder="请输入新建歌单标题"
                      />
                      <button @click="submit">完成</button>
                    </div>
                  </van-popup>
                </div>
              </div>

              <router-link
                tag="div"
                class="song_item"
                v-for="item in setup"
                :key="item.id"
                :to="'/rank/songlistdetails?id=' + item.id"
              >
                <van-swipe-cell>
                  <van-cell :border="false">
                    <div class="img">
                      <img :src="item.coverImgUrl" alt="" />
                    </div>
                    <div class="item_name">
                      <p>{{ item.name }}</p>
                      <p>
                        <span>{{ item.trackCount }}首，</span
                        ><span>播放{{ item.playCount }}次</span>
                      </p>
                    </div>
                  </van-cell>
                  <template #right>
                    <van-button
                      square
                      type="danger"
                      text="删除"
                      @click="del(item.id)"
                    />
                  </template>
                </van-swipe-cell>
              </router-link>
            </div>

            <div class="songlist" v-if="collect">
              <div class="title">
                <h4>
                  收藏歌单<span>({{ collect.length }}个)</span>
                </h4>
                <!-- <div class="iconfont icon-tianjia" ></div> -->
              </div>
              <router-link
                tag="div"
                class="song_item"
                v-for="item in collect"
                :key="item.id"
                :to="'/rank/songlistdetails?id=' + item.id"
              >
                <van-swipe-cell>
                  <van-cell :border="false">
                    <div class="img">
                      <img :src="item.coverImgUrl" alt="" />
                    </div>
                    <div class="item_name">
                      <p>{{ item.name }}</p>
                      <p>
                        <span>{{ item.trackCount }}首，</span
                        ><span>播放{{ item.playCount | playCount }}次</span>
                      </p>
                    </div>
                  </van-cell>
                  <template #right>
                    <van-button
                      square
                      type="danger"
                      text="删除"
                      @click="del(item.id)"
                    />
                  </template>
                </van-swipe-cell>
              </router-link>
            </div>
          </van-tab>
          <van-tab title="动态">
            <div class="dynamic">
              <div class="no_dynamic">暂时还没有动态哦</div>
            </div>
          </van-tab>
          <van-tab title="播客">
            <div class="playvideo">
              <div class="no_playvideo">
                <p class="iconfont icon-yinleku"></p>
                <p>暂无声音</p>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {
  getUserdetail,
  getUserPlaylist,
  getUserLevel,
  getfolloweds,
  getuserFollows,
  getuserCreate,
  getplaylistDelete,
} from "../api/userinfo";
export default {
  created() {
    let usid = window.localStorage.getItem("uid");
    // console.log(usid);
    getUserdetail({ uid: usid }).then((data) => {
      this.userinfolist = data.profile;
    });

    //请求用户歌单信息
    getUserPlaylist({ uid: usid }).then((data) => {
      console.log(data)
      this.userplaylist = data.playlist;
      let like = this.userplaylist.splice(0, 1);
      this.userlikeL = like
      //将创建歌单和收藏歌单进行分类
      this.userplaylist.forEach((item) => {
        // console.log(item)
        if (!item.subscribed) {
          this.setup.push(item);
        } else {
          this.collect.push(item);
        }
      });
    });

    //获取用户等级
    getUserLevel().then((data) => {
      // console.log(data)
      this.lv = data.data;
      // console.log(this.lv)
    });
    

    //获取用户粉丝列表
    getfolloweds({ uid: usid }).then((data) => {
      // console.log(data)
      this.followeds = data.followeds;
    });

    getuserFollows({ uid: usid }).then((data) => {
      // console.log(data);
      this.userfollow = data.follow;
    });

    //创建歌单
    getuserCreate;
  },

  data() {
    return {
      active: null,
      userinfolist: [],
      lv: null,
      userplaylist: [], //用户歌单列表
      setup: [], //创建的歌单列表
      collect: [], //收藏
      followeds: [], //粉丝
      userfollow: [], //关注
      show: false,
      newName: "", //新建歌单名称
      userlikeL:"",
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    submit() {
      if (this.newName == "") {
        Toast("请输入歌单名称");
        console.log(123);
        return;
      }
      getuserCreate({ name: this.newName }).then((data) => {
        console.log(data);
      });
      Toast("创建成功")
      this.show = false;
    },

    del(id) {
      getplaylistDelete({ id: id }).then((data) => {
        console.log(data);
      });
    },
  },

  filters: {
    playCount(value) {
      let w = value > 10000 ? (value / 10000).toFixed(1) : value;
      let hm = w > 10000 ? (w / 10000).toFixed(1) + "亿" : w + "万";
      return hm;
    },
  },
};
</script>

<style lang="less">
.terface-top {
  padding: 15px;
  background-color: #f6f6f6;
  color: #505050;
}
.userinterface {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  padding: 15px 15px;
  box-sizing: border-box;
  padding-top: 65px;
  //   position: fixed;
  .top_interface {
    width: 100%;
    padding: 0 46px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 2px 0 #ccc;
    .top_box {
      width: 100%;
      margin: 0 auto;
      position: relative;
      padding-top: 43px;
      text-align: center;
      // 头像
      .user_img {
        width: 70px;
        height: 70px;
        position: absolute;
        top: -32px;
        border-radius: 50%;
        left: 50%;
        transform: translateX(-50%);
        border: 1px solid #c0c0c0;
        background-color: #ccc;
        overflow: hidden;
        img {
          width: 100%;
          display: block;
        }
      }
      // 昵称
      p {
        font-size: 21px;
        font-weight: 600;
      }
      //关注、粉丝、等级
      .message {
        font-size: 13px;
        color: #9e9e9e;
        margin-top: 8px;
        span {
          margin-left: 10px;
        }
        .on::after,
        .on::before {
          content: "";
          width: 1px;
          height: 10px;
          background: #c0c0c0;
          display: inline-block;
          margin-left: 10px;
        }
        .on::before {
          width: 1px;
          margin-right: 10px;
          margin-left: 0px;
        }
      }

      //地区
      .region {
        width: 100%;
        display: flex;
        font-size: 12px;
        justify-content: center;
        margin-top: 10px;
        .item {
          padding: 3px 5px;
          border-radius: 8px;
          margin-left: 8px;
          color: #505050;
          border: 1px solid #f2f2f2;
        }
      }

      // 编辑资料
      .edit_data {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 13px;
        margin-top: 10px;
        .item {
          padding: 8px 12px;
          border-radius: 16px;
          margin-left: 8px;
          color: #282828;
          border: 1px solid #f2f2f2;
          .icon {
            margin-left: 5px;
            font-size: 13px;
          }
        }
      }
    }
  }

  .nav {
    margin-top: 15px;
    .van-tabs__nav {
      background-color: #f6f6f6;
    }
    .homepage {
      width: 100%;
      display: flex;
      .item {
        flex: 1;
        margin-right: 10px;
        padding: 14px 10px 16px 10px;
        font-size: 13px;
        background-color: #fff;
        border-radius: 8px;
        position: relative;
      }
      .red {
        position: absolute;
        bottom: 16px;
        left: 10px;
        color: red;
        span {
          font-size: 12px;
          margin-left: 5px;
          font-weight: 600;
        }
      }
      .item:last-child {
        margin-right: 0;
      }
      .content {
        height: 77px;
      }
    }

    .songlist {
      padding: 16px 15px;
      background: #fff;
      margin-top: 15px;
      border-radius: 8px;
      .title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        h4 {
          span {
            font-size: 12px;
            color: #9e9e9e;
            font-weight: 100;
            margin-left: 5px;
          }
        }
        .iconfont {
          font-size: 18px;
          color: #9e9e9e;
          line-height: 20px;
          position: relative;
        }
        .van-cell {
          padding: 0px;
          position: absolute;
          top: 0;
          height: 20px;
          opacity: 0;
        }
        .van-icon {
          height: 0px;
          line-height: normal;
        }
        .song_content {
          text-align: center;
          h4 {
            text-align: center;
            font-size: 14px;
            color: #333;
            margin-top: 25px;
          }
          input {
            width: 60%;
            height: 30px;
            padding-left: 10px;
            border-radius: 8px;
            margin-top: 40px;
            border: 1px solid #c0c0c0;
            font-size: 14px;
          }
          button {
            border: none;
            background-color: #fff;
            margin-left: 15px;
            font-size: 15px;
            color: #333;
          }
        }
      }
      .song_item {
        margin-top: 15px;
        display: flex;
        .van-cell {
          padding: 0px;
        }
        .van-swipe-cell {
          width: 100%;
        }
        .van-cell__value--alone {
          display: flex;
        }
        .img {
          width: 56px;
          height: 56px;
          border-radius: 8px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        .item_name {
          flex: 1;
          margin-left: 10px;
          p {
            margin-top: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            span {
              font-size: 13px;
              color: #9e9e9e;
            }
          }
        }
      }
    }

    .dynamic {
      min-height: 300px;
      .no_dynamic {
        font-size: 12px;
        text-align: center;
        margin-top: 30px;
        color: #9e9e9e;
      }
    }

    .playvideo {
      min-height: 300px;
      .no_playvideo {
        font-size: 12px;
        text-align: center;
        margin-top: 30px;
        color: #9e9e9e;
        .iconfont {
          font-size: 40px;
        }
        p {
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>